<template>
    <div id="background">
        <el-container style="height:100%;" direction="vertical">
            <el-header id="registHead" >
                <el-row>
                    <el-col :span="1/2"> <img src="../../assets/icon/logo.png" style="margin: 10px auto;"></el-col>
					<el-col :span="4"> <span style="font-size: 25px;color: #FFFFFF;margin-left: 20px;line-height: 60px;white-space: nowrap;"><b>新职通企业端</b></span></el-col>
                    <el-col :span="1/2" :offset="16"><i class="el-icon-s-home" style="margin: 10px;font-size: 36px;color: #FFFFFF;" @click="goBack"></i></el-col>
                    <el-col :span="2"><span  style="font-size: 24px;color: #FFFFFF;line-height: 60px;white-space: nowrap;" @click="goBack"><b>返回首页</b></span></el-col>
                </el-row>
            </el-header>
            <el-main id="registMain">
                <div style=" position: relative;">
                <div class="registBox">
                    <div class="stepBar">
                        <el-steps :active="3" align-center>
                            <el-step title="填写基本信息" ></el-step>
                            <el-step title="前往邮箱激活" ></el-step>
                            <el-step title="完善企业资料" ></el-step>     
                        </el-steps>
                    </div>
                    <div style="margin-top:30px;">
                        <el-form ref="form" :model="form" :label-position="labelPosition" label-width="180px" :rules="rules">
                            <el-form-item label="企业logo" prop="logo">
                                <el-col :span="6" style="height:90px;">
                                    <el-upload
                                        class="company"
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :show-file-list="false"
                                        :http-request="handleCompanySuccess"
                                        >
                                        <img v-if="imageUrl" :src="imageUrl" class="company">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-col>
                                <el-col :span="13" style="height:90px;" class="juZhong2">
                                <span style="font-size:14px;color:#606266;">企业LOGO将作为您的头像</span>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="企业全称" prop="name">
                                <el-col :span="18">
                                    <el-input v-model="form.name" placeholder="请填写企业全称" class="xinXi"></el-input>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="企业简称" prop="shortname">
                                <el-col :span="18">
                                    <el-input v-model="form.shortname" placeholder="请填写企业简称(5个字符以内)" class="xinXi"></el-input>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="企业类型" prop="nature">
                                <el-select v-model="form.nature" placeholder="请选择" style="width:75%;">
                                    <el-option
                                        v-for="(value,index) in leiXing"
                                        :key="index"
                                        :label="value"
                                        :value="value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="所属行业" prop="industry">
                                <el-select v-model="form.industry" placeholder="请选择" style="width:75%;">
                                    <el-option
                                        v-for="(value,index) in hangYe"
                                        :key="index"
                                        :label="value"
                                        :value="value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="成立时间" prop="date">
                                <el-col :span="18">
                                    <el-date-picker
                                            :picker-options="pickerOptions0"
                                            v-model="form.date"
                                            type="date"
                                            placeholder="选择日期"
                                            value-format="yyyy-MM-dd"
                                            style="width:100%;"
                                            class="registDatePicker">
                                    </el-date-picker>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="企业规模" prop="scale">
                                <el-col :span="18">
                                    <el-input-number v-model="form.scale" :min="1" style="width:100%;"></el-input-number>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="所在地区" prop="area">
                                <v-distpicker   
                                    :province="form.province" 
                                    :city="form.city" 
                                    :area="form.area" 
                                    @selected="onSelected">
                                </v-distpicker>
                            </el-form-item>
                            <el-form-item label="详细地址" prop="address">
                                <el-col :span="18">
                                    <el-input v-model="form.address" placeholder="请写准确的地址，便于系统导航至您的企业" class="xinXi"></el-input>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="联系方式" prop="contact">
                                <el-col :span="18">
                                    <el-input v-model="form.contact" placeholder="请填写企业联系方式" class="xinXi"></el-input>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="企业简介" prop="introduction">
                                <el-col :span="18">
                                    <el-input type="textarea" v-model="form.introduction" minlength="30" maxlength="200" show-word-limit :rows="3"></el-input>
                                </el-col>
                            </el-form-item>
                            <el-form-item  prop="pictures" label="企业照片" >
                                    <el-col :span="6" style="height:90px;">
                                        <el-upload
                                            class="company"
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            :show-file-list="false"
                                            :http-request="handleCompanySuccess1"
                                            >
                                            <img v-if="imageUrl1" :src="imageUrl1" class="company">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>  
                                    </el-col> 
                                    <el-col :span="6" style="height:90px;">
                                        <el-upload
                                            class="company"
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            :show-file-list="false"
                                            :http-request="handleCompanySuccess2"
                                            >
                                            <img v-if="imageUrl2" :src="imageUrl2" class="company">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>  
                                    </el-col>    
                                    <el-col :span="6" style="height:90px;">
                                        <el-upload
                                            class="company"
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            :show-file-list="false"
                                            :http-request="handleCompanySuccess3"
                                            >
                                            <img v-if="imageUrl3" :src="imageUrl3" class="company">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>  
                                    </el-col>    
                             </el-form-item>
                        </el-form>
                    </div>
                    <div style="margin-top:70px;">
                        <span class="juZhong">
                            <el-button type="primary" @click="wanShanZiLiao">完成</el-button>
                        </span>
                    </div>
                </div>
                </div>
            </el-main>
            <el-footer >
                <span style="float:right;color:#707070;margin-right:30px;">联系我们</span>
            </el-footer>
        </el-container>
    </div>    
</template>

<script>
import VDistpicker from 'v-distpicker'
export default {
    components: { VDistpicker },
    data(){
        //校验地址公司名等信息
        var validateInformation= (rule, value, callback) => {            
            if (value === '') {
                callback(new Error('请输入信息'));
            } else if (value.length<4) {
               
                console.log(value);
                callback(new Error('请至少输入4个字'));
            } else {
                callback();
            }
        };
        //校验联系方式
        var reg=/^1[3|4|5|7|8][0-9]{9}/;
        var validateContact= (rule, value, callback) => {            
            if (value === '') {
                callback(new Error('请输入联系方式'));
            } else if (!reg.test(value)) {
               
                console.log(value);
                callback(new Error('请输入有效的手机号码'));
            } else {
                callback();
            }
        };
        //校验简介
        var validateIntroduction= (rule, value, callback) => {            
            if (value === '') {
                callback(new Error('请输入企业简介'));
            } else if (value.length<30) {
               
                console.log(value);
                callback(new Error('请至少输入30字'));
            } else {
                callback();
            }
        };
        //校验简称
        var validateShortName= (rule, value, callback) => {            
            if (value === '') {
                callback(new Error('请输入企业简称'));
            } else if (value.length>5) {
               
                console.log(value);
                callback(new Error('请将企业简称控制在5个字符以内'));
            } else {
                callback();
            }
        };
        return{
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6
                }
            },
            rules:{
                logo:[
                    {
                         required: true,message: '请上传logo', trigger: 'blur'
                    }
                ],
                name:[
                    {
                         required: true,message: '请输入企业全称', trigger: 'blur'
                    },
                    {
                         validator: validateInformation,trigger:'blur'
                    }
                ],
                shortname:[
                    {
                         required: true,message: '请输入企业简称', trigger: 'blur'
                    },
                      {
                         validator: validateShortName,trigger:'blur'
                    }
                ],
                nature:[
                    {
                         required: true,message: '请选择企业类型', trigger: 'change'
                    }
                ],
                industry:[
                    {
                         required: true,message: '请选择企业行业', trigger: 'change'
                    }
                ],
                date:[
                    {
                         required: true,message: '请选择成立时间', trigger: 'blur'
                    }
                ],
                scale:[
                    {
                         required: true,message: '请输入企业规模', trigger: 'blur'
                    }
                ],
                area:[
                    {
                         required: true,message: '请选择所在地区', trigger: 'change'
                    }
                ],
                address:[
                    {
                         required: true,message: '请输入详细地址', trigger: 'blur'
                    },
                    {
                         validator: validateInformation,trigger:'blur'
                    }
                ],
                contact:[
                    {
                         required: true,message: '请输入联系方式', trigger: 'blur'
                    },
                    {
                         validator: validateContact,trigger:'blur'
                    }
                ],
                introduction:[
                    {
                         required: true,message: '请输入企业简介', trigger: 'blur'
                    },
                    {
                         validator: validateIntroduction,trigger:'blur'
                    }
                ],
                pictures:[
                    {
                         required: true,message: '请至少上传一张企业外景图片', trigger: 'blur'
                    }
                ],

            },
                file3:'',
                file2:'',
                file1:'',
                imageUrl3: '',
                imageUrl2: '',
                imageUrl: '',
                imageUrl1: '',
                hangYe: [],
                leiXing: [],
                labelPosition: 'right',
            form: {
                logo:'',
                name:'',
                shortname:'',
                nature:'',
                industry:'',
                date:'',
                scale:1,
                province:'',
                city:'',
                area:'',
                address:'',
                contact:'',
                introduction:'',
                pictures:[],
            },
            normalHeight:document.documentElement.clientHeight,
        }
    },
    mounted(){
        var bg = document.getElementById("background");
        console.log("height:"+this.normalHeight);
        bg.style.height = this.normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        var head=document.getElementById("registMain");
        var headHeight=this.normalHeight/30 *3 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        var main=document.getElementById("registMain");
        var mainHeight=this.normalHeight/30 *24 ;
        main.style.height=mainHeight+"px";

        this.getLeiXing();
        this.getHangYe();
    },
    methods:{
        handleCompanySuccess3(file){
            const isJPG = file.file.type === 'image/jpeg';
            const isGIF = file.file.type === 'image/gif';
            const isPNG = file.file.type === 'image/png';
            const isBMP = file.file.type === 'image/bmp';
            const isLt4M = file.file.size / 1024 / 1024 < 4;
            const isBig = file.file.size / 1024 / 1024 > 1;
            if (!isJPG && !isGIF && !isPNG && !isBMP) {
                this.$message.error('上传图片只能是jpg/png/gif/bmp格式!');
            }else{
                if (!isLt4M) {
                    this.$message.error('上传图片大小不能超过 4MB!');
                }else{
                    if(isBig){
                        this.$message.error('上传图片过大请耐心等待！');
                        console.log(file);
                        this.imageUrl3 = URL.createObjectURL(file.file);
                        this.file3=file.file;
                        console.log(this.file1);
                        this.form.pictures.push(this.file3);
                    }else{
                        console.log(file);
                        this.imageUrl3 = URL.createObjectURL(file.file);
                        this.file3=file.file;
                        console.log(this.file3);
                        this.form.pictures.push(this.file3);
                    }
                }
            }
        },
        handleCompanySuccess2(file){
            const isJPG = file.file.type === 'image/jpeg';
            const isGIF = file.file.type === 'image/gif';
            const isPNG = file.file.type === 'image/png';
            const isBMP = file.file.type === 'image/bmp';
            const isLt4M = file.file.size / 1024 / 1024 < 4;
            const isBig = file.file.size / 1024 / 1024 > 1;
            if (!isJPG && !isGIF && !isPNG && !isBMP) {
                this.$message.error('上传图片只能是jpg/png/gif/bmp格式!');
            }else{
                if (!isLt4M) {
                    this.$message.error('上传图片大小不能超过 4MB!');
                }else{
                    if(isBig){
                        this.$message.error('上传图片过大请耐心等待！');
                        console.log(file);
                        this.imageUrl2 = URL.createObjectURL(file.file);
                        this.file2=file.file;
                        console.log(this.file2);
                        this.form.pictures.push(this.file2);
                    }else{
                        console.log(file);
                        this.imageUrl2 = URL.createObjectURL(file.file);
                        this.file2=file.file;
                        console.log(this.file2);
                        this.form.pictures.push(this.file2);
                    }
                }
            }
        },
        handleCompanySuccess1(file){
            const isJPG = file.file.type === 'image/jpeg';
            const isGIF = file.file.type === 'image/gif';
            const isPNG = file.file.type === 'image/png';
            const isBMP = file.file.type === 'image/bmp';
            const isLt4M = file.file.size / 1024 / 1024 < 4;
            const isBig = file.file.size / 1024 / 1024 > 1;
            if (!isJPG && !isGIF && !isPNG && !isBMP) {
                this.$message.error('上传图片只能是jpg/png/gif/bmp格式!');
            }else{
                if (!isLt4M) {
                    this.$message.error('上传图片大小不能超过 4MB!');
                }else{
                    if(isBig){
                        this.$message.error('上传图片过大请耐心等待！');
                        console.log(file);
                        this.imageUrl1 = URL.createObjectURL(file.file);
                        this.file1=file.file;
                        console.log(this.file1);
                        this.form.pictures.push(this.file1);
                    }else{
                        console.log(file);
                        this.imageUrl1 = URL.createObjectURL(file.file);
                        this.file1=file.file;
                        console.log(this.file1);
                        this.form.pictures.push(this.file1);
                    }
                }
            }
        },
        handleCompanySuccess(file){
            const isJPG = file.file.type === 'image/jpeg';
            const isGIF = file.file.type === 'image/gif';
            const isPNG = file.file.type === 'image/png';
            const isBMP = file.file.type === 'image/bmp';
            const isLt4M = file.file.size / 1024 / 1024 < 4;
            const isBig = file.file.size / 1024 / 1024 > 1;
            if (!isJPG && !isGIF && !isPNG && !isBMP) {
                this.$message.error('上传图片只能是jpg/png/gif/bmp格式!');
            }else{
                if (!isLt4M) {
                    this.$message.error('上传图片大小不能超过 4MB!');
                }else{
                    if(isBig){
                        this.$message.error('上传图片过大请耐心等待！');
                        console.log(file);
                        this.imageUrl = URL.createObjectURL(file.file);
                        this.form.logo=file.file;
                    }else{
                        console.log(file);
                        this.imageUrl = URL.createObjectURL(file.file);
                        this.form.logo=file.file;
                    }
                }
            }
        },
        goBack(){
            this.$router.push({
                path:'/',                 
            }) 
        },
        wanShanZiLiao(){
            this.$refs['form'].validate((valid) => {
            if (valid) {
            const formData = new FormData();
            formData.append("logo", this.form.logo);
            formData.append("name", this.form.name);
            formData.append("shortname", this.form.shortname);
            formData.append("nature", this.form.nature);
            formData.append("industry", this.form.industry);
            formData.append("date", this.form.date);
            formData.append("scale", this.form.scale);
            formData.append("province", this.form.province);
            formData.append("city", this.form.city);
            formData.append("area", this.form.area);
            formData.append("address", this.form.address);
            formData.append("contact", this.form.contact);
            formData.append("introduction", this.form.introduction);
            formData.append("pictures", this.form.pictures);
            var URL='http://47.101.180.43:8075/companyUserInfo/infoCreation';
            console.log(formData);
            this.$ajax({
                    method:'put',
                    url:URL,
                    data:formData,
                    headers:{'Content-Type':'application/x-www-form-urlencoded'},
                }).then(response =>{
                    if(response.data.code==0){
                        console.log(response.data.data);
                        this.$notify({
                                message:response.data.data
                        });
                        this.$router.push({
                                path:'/companyPage/home/selfinfo',
                        })
                    }else{
                        this.$notify({
                                message:response.data.msg
                        });
                    }
                }).catch(error => {
                console.log('完善失败');
                });
            }else {
                    console.log('error submit!!');
            }
            });
        },
        onSelected(data) {
            this.form.province = data.province.value;
            console.log(this.form.province);
            this.form.city = data.city.value;
            console.log(this.form.city);
            this.form.area = data.area.value;
            console.log(this.form.area);
        },
        getLeiXing(){
            var URL='http://47.101.180.43:8075/company/companyTypes'
                        this.$ajax({
                        method:'get',
                        url:URL,
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.msg); 
                           this.leiXing=response.data.data;
                           console.log('这里是类型'+this.leiXing);
                        }else{
                            console.log(response.data.msg); 
                        }
                    }).catch(error => {
                    console.log('类型获取失败');
                    });
        },
        getHangYe(){
            var URL='http://47.101.180.43:8075/company/industry'
                        this.$ajax({
                        method:'get',
                        url:URL,
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.msg); 
                           this.hangYe=response.data.data;
                           console.log('这里是行业'+this.hangYe);
                        }else{
                            console.log(response.data.msg); 
                        }
                    }).catch(error => {
                    console.log('行业获取失败');
                    });
        },
    }
}
</script>

<style>
.registDatePicker .el-input__inner{
    padding-left:30px;
}
.company {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 90px;
    height: 90px;
    line-height: 90px;
  }
  .avatar-uploader-icon {
    font-size: 18px;
    color: #8c939d;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
  }
.juZhong2{
    display:flex;
    align-items:center;
    /* justify-content:center */
  }
.juZhong{
    display:flex;
    align-items:center;
    justify-content:center
}
.registBox{
    top: 50%;
    left: 50%;
    margin-left: -300px;
    width:600px;
    /* height:500px; */
    /* background-color: #4A4C5B; */
    position: absolute;

}
#registMain{
   
     background-color: #ffffff;
    /* height:580px; */
}
#registHead{
     background-color: #4A4C5B;
}
#background{
    background-color: #ffffff;
    height:100%;
}
</style>
